<template>
    <div>
        <div :class="isSignIn? 'containerlogin' : 'containerlogin right-panel-active'">
            <a class="t2" @click="closeLogin"><i class="fa fa-times-circle-o fa-2x"></i></a>
            <div class="form-container sign-up-container">
                <el-form onautocomplete="off" :model="registerForm"
                         :rules="registerRules" ref="registerForm">
                    <h1>第三方按钮注册</h1>
                    <div class="social-container">
                        <a href="#" class="social">
                            <i class="fa fa-qq"></i>
                        </a>
                        <a href="#" class="social">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                    <span>或使用您的电子邮箱注册</span>
                    <el-form-item prop="username">
                        <el-input name="username" type="text" placeholder="注册用户名"
                                  v-model="registerForm.username" onautocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="phoneNumber">
                        <el-input name="phoneNumber" type="phone" placeholder="注册手机号"
                                  v-model="registerForm.phoneNumber" onautocomplete="off" clearable>
                            <span slot="prefix" style="color: #1c1f21;">+86</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input name="password" type="password" placeholder="设置登录密码" v-model="registerForm.password"
                                  onautocomplete="off" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="authCode">
                        <el-input name="authCode" type="text" placeholder="短信验证码" v-model="registerForm.authCode"
                                  onautocomplete="off">
                            <p class="reSend" slot="suffix">
                                <span v-show="show" @click="getAuthCode" class="js-signin-send">获取验证码</span>
                                <span v-show="!show">{{count}}s</span>
                            </p>

                        </el-input>
                    </el-form-item>
                    <el-button @click="handleRegister" :loading="loading">注册</el-button>
                </el-form>
            </div>
            <div class="form-container sign-in-container">
                <el-form onautocomplete="off" :model="loginForm"
                         :rules="loginRules" ref="loginForm">
                    <h1>第三方登录</h1>
                    <div class="social-container">
                        <a href="#" class="social">
                            <i class="fa fa-qq"></i>
                        </a>
                        <a href="#" class="social">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                    <div v-if="!loginForm.isPhoneSignIn">
                        <el-form-item prop="username">
                            <el-input name="username" type="text" placeholder="手机号/用户名/邮箱"
                                      v-model="loginForm.username" onautocomplete="off" clearable></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input name="password" type="password" placeholder="密码" v-model="loginForm.password"
                                      @keyup.enter.native="handleLogin"
                                      onautocomplete="off" clearable>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-if="loginForm.isPhoneSignIn">
                        <el-form-item prop="phoneNumber">
                            <el-input name="phoneNumber" type="phone" placeholder="短信登录仅限中国大陆用户"
                                      v-model="loginForm.phoneNumber" onautocomplete="off" clearable>
                                <span slot="prefix" style="color: #1c1f21;">+86</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="authCode">
                            <el-input name="authCode" type="text" placeholder="短信验证码" v-model="loginForm.authCode"
                                      onautocomplete="off">
                                <p class="reSend" slot="suffix">
                                    <span v-show="show" @click="getAuthCode" class="js-signin-send">获取验证码</span>
                                    <span v-show="!show">{{count}}s</span>
                                </p>

                            </el-input>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button @click="handleLogin" :loading="loading">登录</el-button>
                    </el-form-item>
                    <span v-if="loginForm.isPhoneSignIn" class="pop-login-sns" @click="ShowSignin">账号密码登录</span>
                    <span v-if="!loginForm.isPhoneSignIn" class="pop-login-sns" @click="ShowPhoneSignin">手机短信登录</span>
                </el-form>
            </div>
            <div class="overlay-container">
                <div class="overlay">
                    <div class="overlay-panel overlay-left">
                        <h1>欢迎回来</h1>
                        <p>与我们保持联系请登录您的个人信息</p>
                        <button class="ghost" @click="signIn">登录</button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h1>欢迎光临</h1>
                        <p>输入您的个人资料，并与我们一起开始旅程</p>
                        <button class="ghost" @click="signUp">注册</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask"></div>
    </div>
</template>
<script>
    import {isValidEmail, isValidPhone} from '../../assets/js/validate';
    export default {
        name: "login",
        data() {
            const validateUsername = (rule, value, callback) => {
                if (value!==null && value!=="") {
                    callback();
                } else {
                    callback(new Error("请您输入手机/邮箱/用户名"));
                }
            };
            const validatePass = (rule, value, callback) => {
                if (value.length < 6 || value.length > 20 || value.indexOf(" ") != -1) {
                    callback(new Error('请输入6-20位密码，区分大小写，不能使用空格！'));
                } else {
                    callback();
                }
            };
            const validatePhone = (rule, value, callback) => {
                if (!isValidPhone(value)) {
                    callback(new Error("请您输入正确的手机号"));
                } else {
                    callback();
                }
            };
            const validateAuthCode = (rule, value, callback) =>{
                if (isNaN(value) || value.length == 6) {
                    callback();
                } else {
                    callback(new Error("请您输入验证码"));
                }
            };
            const validateRegUsername = (rule, value, callback) => {
                if (value!=null || value!='') {
                    this.$store.dispatch('VerifyUsername', value).then(() => {
                        callback();
                    }).catch(error => {
                        callback(new Error(error.message));
                    });
                } else {
                    callback(new Error("请您输入手机/邮箱/用户名"));
                }
            };
            const validateRegPhone = (rule, value, callback) => {
                if (!isValidPhone(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    this.$store.dispatch('VerifyTelephone', value).then(() => {
                        callback();
                    }).catch(error => {
                        callback(new Error(error.message));
                    });
                }
            };
            return {
                isSignIn: true,
                loginForm: {
                    username: "",
                    password: "",
                    phoneNumber: "",
                    authCode: "",
                    isPhoneSignIn: false
                },
                registerForm: {
                    username: "",
                    password: "",
                    phoneNumber: "",
                    authCode: ""
                },
                loginRules: {
                    username: [{required: true, trigger: 'blur', validator: validateUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePass}],
                    phoneNumber: [{required: true, trigger: 'blur', validator: validatePhone}],
                    authCode: [{required: true, trigger: 'blur', validator: validateAuthCode}],
                },
                registerRules:{
                    username: [{required: true, trigger: 'blur', validator: validateRegUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePass}],
                    phoneNumber: [{required: true, trigger: 'blur', validator: validateRegPhone}],
                    authCode: [{required: true, trigger: 'blur', validator: validateAuthCode}]
                },
                loading: false,
                show: true,
                count: '', //倒计时
                timer: null, //计时器
            };
        },
        comments: {},
        created() {
        },
        methods: {
            signIn: function () {
                this.isSignIn = true;
            },
            signUp: function () {
                this.isSignIn = false;
            },
            closeLogin: function () {
                this.$emit("showLoginBox", false);
            },
            handleLogin: function () {
                this.loading = true;
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.$store.dispatch('Login', this.loginForm).then(response => {
                            this.loading = false;
                            this.closeLogin();
                            this.$store.dispatch('GetInfo').then(() => {
                            });
                            this.$router.push({path: '/'});
                        }).catch(error => {
                            this.loading = false;
                            if (error.code === 405){
                                this.loginRules.authCode.push({
                                    validator: (rule, value, callback) => {
                                        callback(new Error(error.message))
                                    },
                                    trigger: 'blur'
                                });
                                this.$refs.loginForm.validateField('authCode'); // 手动校验
                                this.loginRules.authCode = this.loginRules.authCode.slice(0, 1); // 删除校验
                            }else {
                                this.loginRules.password.push({
                                    validator: (rule, value, callback) => {
                                        callback(new Error(error.message))
                                    },
                                    trigger: 'blur'
                                });
                                this.$refs.loginForm.validateField('password'); // 手动校验
                                this.loginRules.password = this.loginRules.password.slice(0, 1); // 删除校验
                            }
                        });
                    } else {
                        this.loading = false;
                        return false;
                    }
                });
            },
            handleRegister:function() {
                this.loading = true;
                this.$refs.registerForm.validate(valid=>{
                    if (valid) {
                        this.$store.dispatch('Register', this.loginForm).then(() => {
                            this.loading = false;
                            this.closeLogin();
                            this.$router.push({path: '/'});
                        }).catch(error => {
                            this.loading = false;
                            if (error.code === 405){
                                this.loginRules.authCode.push({
                                    validator: (rule, value, callback) => {
                                        callback(new Error(error.message))
                                    },
                                    trigger: 'blur'
                                });
                                this.$refs.registerForm.validateField('authCode'); // 手动校验
                                this.loginRules.authCode = this.loginRules.authCode.slice(0, 1); // 删除校验
                            }else {
                                this.loginRules.password.push({
                                    validator: (rule, value, callback) => {
                                        callback(new Error(error.message))
                                    },
                                    trigger: 'blur'
                                });
                                this.$refs.registerForm.validateField('username'); // 手动校验
                                this.loginRules.password = this.loginRules.password.slice(0, 1); // 删除校验
                            }
                        })
                    }else {
                        this.loading = false;
                        return false;
                    }
                });
            },
            ShowPhoneSignin: function () {
                this.loginForm.isPhoneSignIn = true;
                this.$refs.loginForm.clearValidate();
            },
            ShowSignin: function () {
                this.loginForm.isPhoneSignIn = false;
                this.$refs.loginForm.clearValidate();
            },
            getAuthCode: function () {
                let phone = this.$refs.loginForm.model.phoneNumber;
                if(isValidPhone(phone)) {
                    this.$store.dispatch('GenerateAuthCode', phone).then(() => {
                        const TIME_COUNT = 60;
                        if (!this.timer) {
                            this.count = TIME_COUNT;
                            this.show = false;
                            this.timer = setInterval(() => {
                                if (this.count > 0 && this.count <= TIME_COUNT) {
                                    this.count--;
                                } else {
                                    this.show = true;
                                    clearInterval(this.timer);
                                }
                            }, 1000);
                        }
                    });
                }
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .reSend {
        top: 12px;
        right: 14px;
    }
    .js-signin-send{
        cursor: pointer;
        color: #1481b8!important
    }
    .js-signin-send:hover{
        color: #0dacb8 !important
    }
    .el-input{
        width: 270px;
    }
    .pop-login-sns {
        margin-left: 30px;
        margin-right: 24px;
        padding-right: 24px;
        display: inline-block;
        font-size: 14px;
        color: #ff4b2b !important;
        text-align: left;
        line-height: 24px;
        border-right: 1px solid #1a1C1F21;
        cursor: pointer;
    }

    .pop-login-sns:hover {
        color: #f85c70 !important;
    }

    .t2 {
        position: absolute;
        top: -2.1px;
        left: 93%;
        cursor: pointer;
        transform: translateX(100%);
        opacity: 1;
        z-index: 102;
    }

    .t2:hover{
        color: #ff4b2b
    }

    .containerlogin .form-container h1 {
        font-weight: bold;
        margin: 0;
        color: beige;
        font-size: 1.875rem;
    }

    .containerlogin .form-container p {
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin: 10px 0 30px;
    }

    .containerlogin .form-container span {
        font-size: 12px;
        color: beige;
    }

    .containerlogin .form-container a {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        margin: 15px 0;
    }

    .containerlogin {
        background-color: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        position: fixed;
        overflow: hidden;
        width: 768px;
        max-width: 100%;
        min-height: 480px;
        opacity: 0.8;
        left: 25%;
        top: 25%;
        z-index: 101;
    }

    .form-container form {
        background: rgba(45, 52, 54, 1.0);
        display: flex;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .social-container {
        margin: 20px 0;
    }

    .social-container a {
        border: 1px solid #ddd;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        height: 40px;
        width: 40px;
    }


    /*.form-container input {*/
    /*    background: #eee;*/
    /*    border: none;*/
    /*    padding: 12px 15px;*/
    /*    margin: 8px 0;*/
    /*    width: 100%;*/
    /*}*/

    button {
        border-radius: 20px;
        border: 1px solid #ff4b2b;
        background: #ff4b2b;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        margin-top: 8px;
        padding: 12px 45px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
    }

    /*.containerlogin .form-container input[type=text] {*/
    /*    width: 240px;*/
    /*    text-align: center;*/
    /*    background: transparent;*/
    /*    border: none;*/
    /*    border-bottom: 1px solid #fff;*/
    /*    font-family: 'PLay', sans-serif;*/
    /*    font-size: 16px;*/
    /*    font-weight: 200px;*/
    /*    padding: 10px 0;*/
    /*    transition: border 0.5s;*/
    /*    outline: none;*/
    /*    color: #fff;*/
    /*    font-weight: bold;*/
    /*}*/

    /*.containerlogin .form-container input[type=password] {*/
    /*    width: 240px;*/
    /*    text-align: center;*/
    /*    background: transparent;*/
    /*    border: none;*/
    /*    border-bottom: 1px solid #fff;*/
    /*    font-family: 'PLay', sans-serif;*/
    /*    font-size: 16px;*/
    /*    font-weight: bold;*/
    /*    padding: 10px 0;*/
    /*    transition: border 0.5s;*/
    /*    outline: none;*/
    /*    color: #fff;*/
    /*}*/

    /*.containerlogin .form-container input[type=email] {*/
    /*    width: 240px;*/
    /*    text-align: center;*/
    /*    background: transparent;*/
    /*    border: none;*/
    /*    border-bottom: 1px solid #fff;*/
    /*    font-family: 'PLay', sans-serif;*/
    /*    font-size: 16px;*/
    /*    font-weight: 200px;*/
    /*    padding: 10px 0;*/
    /*    transition: border 0.5s;*/
    /*    outline: none;*/
    /*    color: #fff;*/
    /*    font-weight: bold;*/
    /*}*/

    .containerlogin .form-container button:active {
        transform: scale(0.95);
    }

    .containerlogin .form-container button:focus {
        outline: none;
    }

    .containerlogin .form-container button.ghost {
        background: transparent;
        border-color: #ff4b2b;
        background-color: #ff4b2b
    }

    .form-container {
        position: absolute;
        top: 0;
        height: 100%;
        transition: all 0.6s ease-in-out;
    }

    .sign-in-container {
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .sign-up-container {
        left: 0;
        width: 50%;
        z-index: 1;
        opacity: 0;
    }

    .overlay-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        transition: transform 0.6s ease-in-out;
        z-index: 100;
    }

    .overlay {
        background: transparent;
        background: linear-gradient(to right, #ff4b2b, #ff416c) no repeat 0 0 /cover;
        color: #fff;
        position: absolute;
        left: -100%;
        height: 100%;
        width: 200%;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
    }

    .overlay-panel {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 40px;
        height: 100%;
        width: 50%;
        text-align: center;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
    }

    .overlay-right {
        right: 0;
        transform: translateX(0);
    }

    .overlay-left {
        transform: translateX(-20%);
    }

    /*....Animation....*/

    /*....Move signin to the right....*/
    .containerlogin.right-panel-active .sign-in-container {
        transform: translateX(100%);
    }

    /*....Move overlay to the left....*/
    .containerlogin.right-panel-active .overlay-container {
        transform: translateX(-100%);
    }

    /*....Bring sign up over sign in....*/
    .containerlogin.right-panel-active .sign-up-container {
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
    }

    /*...Move overlay back to right....*/
    .containerlogin.right-panel-active .overlay {
        transform: translateX(50%);
    }

    .containerlogin.right-panel-active .overlay-left {
        transform: translateX(0);
    }

    .containerlogin.right-panel-active .overlay-right {
        transform: translateX(20%);
    }

    /* 遮罩层 */
    .mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 100;
    }
</style>